<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小米</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		a {
			text-decoration: none;
		}
		li {
			list-style:none;
		}
		.orange {
			color: #FF6700!important;
		}
		/*头部开始*/
		.header {
			height: 40px;
			background-color: #333333;
		}
		.header-in {
			width: 1224px;
			height: 40px;
			margin: 0 auto;
		}
		.header-in a {
			display: inline-block;
			line-height: 40px;
			border-right: 1px solid #40403B;
			color: #B0B0B0;
			font-size: 12px;
			padding-right: 7px;
		}
		.header-in a:last-child {
			border: 0;
		}
		/*导航栏开始*/
		.nav {
			height: 99px;
			width: 1224px;
			margin: 0 auto;
		}
		.nav .img {
			width: 244px;
			height: 99px;
			padding-top: 20px;
			box-sizing: border-box;
			float: left;
		}
		.nav img:first-child{
			float: left;
		}
        .nav img:last-child {
        	float: left;
        }
        .wenzi {
        	float: left;
        }
        .nav .wenzi li {
			display: inline-block;
			height: 99px;
			line-height: 99px;
			margin-right: 22px;
			font-size: 14px;
			font-family: "微软雅黑"
		}
		 .nav .wenzi li a {
		 	color: #333333;
		 }
		 /*<!-- banner部分 -->*/
		.banner {
			width: 1224px;
			height: 460px;
			margin: 0 auto;
			background: url(images/banner.png) no-repeat right;

		}
		.banner-in {
			width: 233px;
			height: 460px;
			background-color: #2C505F;
			padding-top: 32px;
			padding-left: 29px;
			box-sizing: border-box;
		}
		.banner-in li {
			height: 42px;
			font-size: 14px;
			font-family: "微软雅黑"
		}
		.banner-in li a {
			color: #FFFFFF;
		}
		.banner-in li a span {
			float: right;
			margin-right: 24px;
		}
		/*banner下部分*/
		.bannerxia {
			height: 172px;
			width: 1224px;
			margin: 13px auto 0;
			margin-bottom: 65px;
		}
		.banner-bottom a {
			float: right;
		}
		.banner-bottom a img {
			margin-left: 14px;
		}
		.banner-bottom a:last-child {
			width: 233px;
			height: 170px;
			background-color: #5F5750;
			text-align: center;
			color: #fff;
			line-height: 39px;
			padding-top: 40px;
			box-sizing: border-box;
			/*因为浮动了,行内元素转化为了行内块.所以不用display*/
		}
		/*智能硬件部分*/
		.zhineng {
			height: 800px;
			background-color: #F5F5F5;
		}
		.zhineng-in {
			height: 800px;
			width: 1224px;
			margin: 0 auto;
			overflow:hidden;
		}
		.zhineng-in-top {
			margin-top: 78px;
			height: 38px;
		}
		.zhineng-in-top a {
			font-family: "微软雅黑";
			color:#383333;
		}
		.zhineng-in-top a:first-child {
			float: left;
		}
		.zhineng-in-top a:last-child {
			float: right;
			margin-right: 27px;
		}
		.zhineng-in-left {
			float: left;
		}
		.zhineng-in-right {
			width: 990px;
			height: 614px;
			float: left;
			/*position: relative;*/
		}
		.zhineng-in-right li {
			width: 235px;
			height: 301px;
			background-color: #FFFFFF;
			float: left;
			margin-left: 12px;
			/*position: absolute;*/
			
		}
		.zhineng-in-right li:hover {
			/*margin-top: -3px;*/
			top: -3px;
			position: relative;
			box-shadow: 0px 0px 15px 2px rgba(0 ,0 , 0, 0.8);
			

		}
		.zhineng-in-right li div { 
			width: 235px;
			height: 180px;
			box-sizing: border-box;
			padding-top: 20px;
			padding-left: 38px;
		}
		.zhineng-in-right li p {
			text-align: center;
			line-height: 24px;
			height: 121px;
			margin-bottom: 0px;
			padding-top: 20px;
			box-sizing: border-box;
			font-size: 14px;
			font-family: "微软雅黑";
			color: #333333;
		}
		.zhineng-in-right li p span {
			color: #C5C5C5;
		}
		.zhineng-in-right li:nth-child(4n) {
			float: right;
		}
		.zhineng-in-right li:nth-child(5) {
			margin-top: 12px;
		}
		.zhineng-in-right li:nth-child(6) {
			margin-top: 12px;
		}
		.zhineng-in-right li:nth-child(7) {
			margin-top: 12px;
		}
		.zhineng-in-right li:nth-child(8) {
			margin-top: 12px;
		}
		.one {
			position: absolute;
			width: 65px;
			height: 22px;
			background-color: #FFAC13;
			top: 0;
			left: 50%;
			margin-left: -32px;
			text-align: center;
			color: #FFFFFF;
			font-family: "微软雅黑";
		}
		.two {
			position: absolute;
			width: 65px;
			height: 22px;
			background-color: #E53935;
			top: 0;
			left: 50%;
			margin-left: -32px;
			text-align: center;
			color: #FFFFFF;
			font-family: "微软雅黑";
		}
		/*footer部分*/
		.footer {
			height: 209px;
		}
		.footer-in {
			height: 209px;
			width: 1224px;
			margin: 0 auto;
			overflow: hidden;
		}
		.dl dl {
			height: 152px;
			width: 160px;
			margin-top: 57px;
			font-family: "微软雅黑";
			float: left;
		}
		.dl dl dt {
			font-size: 14px;
			margin-bottom: 20px;

		}
		.dl dl dd {
			font-size: 12px;
			line-height: 29px;
			color: #333333;
		}
		.footer-in-you {
			float: left;
			margin: 57px 0 0 17px;
			height: 109px;
			width: 245px;
			border-left: 1px solid #ECECEC;
			text-align: center;
			font-family: "微软雅黑";
		}
		.footer-in-you h3 {
			color: #FF6700;
			margin-bottom: 5px;
		}
		.footer-in-you p {
			font-size: 12px;
			line-height: 18px;
			color: #333333;
		}
		/*底下部分*/
		.dixia {
			height: 157px;
			background-color: #F5F5F5;
			overflow: hidden;
		}
		.dixia-in {
			height: 127px;
			width: 1224px;
			margin-top: 30px;
			margin-left: auto;
			margin-right: auto;
			position: relative;
		}
		 .logo {
			float: left;
			margin-right: 10px;
		}
		.dixia-in div{
			float: left;
			font-size: 12px;
			line-height: 19px;
			padding-top: 2px;
			color: #B0B0B0;
		}
		.dixia-in div p:first-child{
			color: #757575;
		}
		.juzi img {
			position: absolute;
			bottom: 19px;
			left: 50%;
			margin-left: -134px;
		}
</style>
</head>
<body>
	<!-- 头部开始 -->
	<div class="header">
		<div class="header-in">
			<a href="#">小米网</a>
			<a href="#">MIUI</a>
			<a href="#">米聊</a>
			<a href="#">游戏</a>
			<a href="#">多看阅读</a>
			<a href="#">云服务</a>
			<a href="#">小米网移动版</a>
			<a href="#">问题反馈</a>
			<a href="#">Select Region</a>
		</div>
	</div>
	<!-- 导航栏开始 -->
	<div class="nav">
		<div class="img">
			<img src="images/logo.png" alt="">
			<img src="images/haidaoquannew.gif" alt="">
		</div>
		<div class="wenzi">
			<ul>
				<li><a href="#">小米手机</a></li>
				<li><a href="#">红米</a></li>
				<li><a href="#">平板</a></li>
				<li><a href="#">电视机</a></li>
				<li><a href="#">盒子</a></li>
				<li><a href="#">影音</a></li>
				<li><a href="#">路由器</a></li>
				<li><a href="#">智能硬件</a></li>
				<li><a href="#">服务</a></li>
				<li><a href="#">社区</a></li>
			</ul>
		</div>
	</div>
	<!-- banner部分 -->
	<div class="banner">
		<div class="banner-in">
			<ul>
				<li><a href="#">手机 平板 电话卡<span>></span></a></li>
				<li><a href="#">电视 盒子<span>></span></a></li>
				<li><a href="#">路由器 智能硬件<span>></span></a></li>
				<li><a href="#">移动电源 插线板<span>></span></a></li>
				<li><a href="#">耳机 音箱<span>></span></a></li>
				<li><a href="#">电池 存储卡<span>></span></a></li>
				<li><a href="#">保护套 后盖<span>></span></a></li>
				<li><a href="#">贴膜 其他配件<span>></span></a></li>
				<li><a href="#">米兔 服装<span>></span></a></li>
				<li><a href="#">箱包 其他周边<span>></span></a></li>
			</ul>
		</div>

		
	</div>
	<!-- banner下部分 -->
	<div class="bannerxia">
		<div class="banner-bottom">
			<a href=""><img src="images/9df8948d-398c-4aa6-a744-2321c7b2dbbc.jpg" alt="" width="316px"></a>
			<a href=""><img src="images/05afb66f-1334-4522-a472-b8aee48cf3de.jpg" alt="" width="316px"></a>
			<a href=""><img src="images/ddffe50f-7022-48ed-9553-24fb7c29dcc4.jpg" alt="" width="316px"></a>
			<a href="">我就是一个空色块<br>一言不合就这么任性</a>
		</div>
	</div>
 	<!-- 智能硬件部分 -->
 	<div class="zhineng">
 		<div class="zhineng-in">
 			<div class="zhineng-in-top">
				<a href="#">智能硬件</a>
				<a href="#">查看全部</a>
 			</div>
 			<div class="zhineng-in-left">
 				<img src="images/124d82cc-cfce-44ab-b711-28b21be81683.jpg" alt="">
 			</div>
 			<div class="zhineng-in-right">
 				<ul>
 					<li>
 					<div><a href="#"><img src="images/T1rQAgB7Av1RXrhCrK.jpg" alt="">
 					<span class="one">免邮费</span></div>
 					<p>小米路由器3<br /><span>四天线设计，更安全更稳定</span><br /><span class="orange">149元</span></p></a>
 					</li>
 					<li>
 					<div><a href="#"><img src="images/pms_1464071511.37197399!220x220.jpg" alt="" width="160px"></div>
 					<p>米家 LED 智能台灯<br /><span>无可视频闪，亮度色温无级调节</span><br /><span class="orange">169元</span></p></a>
 					</li>
 					<li>
 					<div><a href="#"><img src="images/T1zTK_Bbhv1RXrhCrK.jpg" alt="" width="160px"><span class="one">免邮费</span></div>
 					<p>小米净水器 厨下式<br /><span>RO反渗透直出纯净水，包邮包安装</span><br /><span class="orange">1999元</span></p></a>
 					</li>
 					<li>
 					<div><a href="#">><img src="images/T1o3Z_BKET1RXrhCrK!220x220.jpg" alt="" width="160px"></div>
 					<p>小蚁智能摄像机 夜视版<br /><span>能看能听能说，手机远程观看</span><br /><span class="orange">149元</span></p></a
 					</li>
 					<li>
 					<div><a href="#"><img src="images/T1KOYgBQdv1RXrhCrK.jpg" alt="" width="160px"></div>
 					<p>Yeelight床头灯<br /><span>触摸式操作，给卧室1600万种颜色</span><br /><span class="orange">249元</span></p></a>
 					</li>
 					<li>
 					<div><a href="#"><img src="images/T1zBYgBCWv1RXrhCrK!220x220.jpg" alt="" width="160px"></div>
 					<p>小米空气净化器2<br /><span>10分钟，房间空气焕然一新</span><br /><span class="orange">699元</span></p></a>
 					</li>
 					<li>
 					<div><a href="#"><img src="images/T1YTJ_B_Av1RXrhCrK.jpg" alt="" width="160px"><span class="two">享9折</span></div>
 					<p>小米智能安防套装<br /><span>智能警戒，为您的家增添一份安心</span><br /><span class="orange">169元 <s><span style="color: #C5C5C5">188元</span></s></span></p>
 					</li></a>
 					<li>
 					<div><a href=""><img src="images/T1MQDgB5Vv1RXrhCrK.jpg" alt="" width="160px"></div>
 					<p>米家iHealth血压计<br /><span>爸妈上手就会用的智能血压计</span><br /><span class="orange">399元</span></p></a>
 					</li>
 				</ul>
 			</div>
 		</div>
 		
 	</div>

	<!-- footer部分 -->
	<div class="footer">
		<div class="footer-in">
			<div class="dl">
				<dl>
					<dt><a href="#">帮助中心</a></dt>
					<dd><a href="#">账户管理</a></dd>
					<dd><a href="#">购物指南</a></dd>
					<dd><a href="#">订单操作</a></dd>
				</dl>
				<dl>
					<dt><a href="#">服务支持</a></dt>
					<dd><a href="#">售后政策</a></dd>
					<dd><a href="#">自助服务</a></dd>
					<dd><a href="#">相关下载</a></dd>
				</dl>
				<dl>
					<dt><a href="#">线下门店</a></dt>
					<dd><a href="#">小米之家</a></dd>
					<dd><a href="#">服务网点</a></dd>
					<dd><a href="#">零售网点</a></dd>
				</dl>
				<dl>
					<dt><a href="#">关于小米</a></dt>
					<dd><a href="#">了解小米</a></dd>
					<dd><a href="#">加入小米</a></dd>
					<dd><a href="#">联系我们</a></dd>
				</dl>
				<dl>
					<dt><a href="#">关注我们</a></dt>
					<dd><a href="#">新浪微博</a></dd>
					<dd><a href="#">小米部落</a></dd>
					<dd><a href="#">官方微信</a></dd>
				</dl>
				<dl>
					<dt><a href="#">特色服务</a></dt>
					<dd><a href="#">F 码通道</a></dd>
					<dd><a href="#">小米移动</a></dd>
					<dd><a href="#">防伪查询</a></dd>
				</dl>
			</div>
			<div class="footer-in-you">
				<h3>400-100-5678</h3>
				<p>周一至周日 8:00-18:00<br />（仅收市话费）</p>
					
			</div>
		</div>
	</div>
	<div class="dixia">
		<div class="dixia-in">
			<div class="logo"><img src="images/logo.png" alt=""></div>
			<div><p>小米网|MIUI|米聊|多看书城|小米路由器|视频电话|小米后院|小米天猫店|小米淘宝直营店|小米网盟|问题反馈|Select Region</p>
			<p>?mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</p>
			<p>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p></div>
			<div class="juzi"><img src="images/slogan2016.png" alt=""></div>
		</div>
	</div>
</body>
</html>